<template>
  <!--主体内容区域-->
  <section class="content">
    <!--  左边区域-->
    <div class="con_left">
      <!--    左边头部-->
      <header>
        <div class="logo">
          <dv-border-box-4 :color="[ 'green']" class="border-box-4">
            <dv-border-box-4 :reverse="true" :color="[ 'green']" style="overflow:hidden">
              <dv-border-box-8 class="box-8" style="overflow:hidden">
                <span class="title1">湖北交投智慧高速交通态势</span>
                <span class="title2">Intelligent high speed traffic situation monitoring</span>
              </dv-border-box-8>
            </dv-border-box-4>
          </dv-border-box-4>
        </div>
        <div class="time">
          <div style="display: flex;flex-direction: row;overflow:hidden;">
            <dv-decoration-11
              class="de-decoration11"
              @click.native="realTime"
              :color="[colorChange]"
            >实时
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fiveTime"
              :color="[colorChange1]"
            >5min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="fifTime"
              :color="[colorChange2]"
            >15min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="threeTime"
              :color="[colorChange3]"
            >30min
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="firstTime"
              :color="[colorChange4]"
            >1h
            </dv-decoration-11>
            <dv-decoration-11
              class="decoration11"
              @click.native="secondTime"
              :color="[colorChange5]"
            >2h
            </dv-decoration-11>
          </div>
        </div>
      </header>
      <!--    左边内容-->
      <section>
        <div class="left">
          <div class="realtime">
            <dv-decoration-3 class="decoration-3"/>
            <dv-border-box-11 title="交通实时态势" :color="[ 'green']" style="overflow:hidden;">
              <leftRealDataCharts :jamsTotalRate="jamsTotalRate"/>
              <!--     <leftRealDataCharts4 /> -->
              <div style=" display: flex; flex-direction: column;">
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">车流量 {{trafficRealTImeList.carNum}}辆</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">平均速度 {{trafficRealTImeList.avgSpeed}}</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">拥堵里程 {{trafficRealTImeList.jamsTotal}}</span>
                </div>
                <div style=" display: flex;flex-direction: row;">
                  <img src="../../assets/imgs/tubiao.png" class="imgs01"/>
                  <span class="decoration-7">高速总里程数 {{trafficRealTImeList.total}}</span>
                </div>
              </div>
            </dv-border-box-11>
          </div>
          <div class="traffic">
            <dv-border-box-9 style="overflow:hidden;" :color="[ 'green']">
              <leftCongestionChart :rateDatas="rateDatas"/>
            </dv-border-box-9>
          </div>
        </div>
        <div class="right">
          <div class="map">
            <mapOfHuBei/>
            <dv-decoration-7 class="eventName" :color="['green','grenn']">事件清单</dv-decoration-7>
            <dv-border-box-7 class="border-box">
              <event :selectEvenits="selectEvenits"/>
            </dv-border-box-7>
            <dv-border-box-7 class="border-box1">
              <eventVideo :eventVideos="eventVideos"/>
            </dv-border-box-7>
            <div class="border-boxRight1" align="left">
              <span class="first"></span>
              <span class="first1">畅通</span>
            </div>
            <div class="border-boxRight2" align="left">
              <span class="second"></span>
              <span class="second1">基本畅通</span>
            </div>
            <div class="border-boxRight3" align="left">
              <span class="three"></span>
              <span class="three1">轻度拥堵</span>
            </div>
            <div class="border-boxRight4" align="left">
              <span class="four"></span>
              <span class="four1">中度拥堵</span>
            </div>
            <div class="border-boxRight5" align="left">
              <span class="five"></span>
              <span class="five1">重度拥堵</span>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!--  右边区域-->
    <div class="con_right">
      <!--    基础信息展示-->
      <div class="basic_info">
        <div style="display: flex;flex-direction: row">
          <dv-decoration-1 class="dv-decoration-1"/>
          <dv-decoration-1 class="decoration-1"/>
        </div>
        <basicInfo :selectBasics="selectBasics"/>
      </div>
      <div class="traffic_top10">
        <dv-border-box-8>
          <rightCharts :selectSections="selectSections"/>
        </dv-border-box-8>
      </div>
      <div class="flow_top10">
        <dv-border-box-8 :reverse="true">
          <rightCharts2 :selectFlows="selectFlows"/>
        </dv-border-box-8>
      </div>
    </div>
  </section>
</template>

<script>
import leftRealDataCharts from '@/views/home/components/leftRealDataCharts'
import leftCongestionChart from '@/views/home/components/leftCongestionChart'
import basicInfo from '@/views/home/components/basicInfo'
import rightCharts from '@/views/home/components/rightCharts'
import rightCharts2 from '@/views/home/components/rightCharts2'
import event from '@/views/home/components/event'
import eventVideo from '@/views/home/components/eventVideo'
import mapOfHuBei from '@/views/home/components/mapOfHuBei'

// import { getLatlonList } from '@/api/home/map/index'

import {
  trafficRealTIme,
  selectBasics,
  selectSection,
  selectFlow,
  selectEvenit,
  addTrafficRealTime,
  trafficMapType,
  trafficJamsRate,
  cameraInfoList
} from '@/api/index'

export default {
  name: 'Home',
  components: {
    leftRealDataCharts,
    // leftRealDataCharts4,
    leftCongestionChart,
    basicInfo,
    rightCharts,
    rightCharts2,
    mapOfHuBei,
    event,
    eventVideo
    // Map
  },
  data () {
    return {
      trafficRealTImeList: {},
      selectBasics: {},
      selectSections: [],
      selectFlows: [],
      selectEvenits: [],
      colorChange: '#60cda0',
      colorChange1: '',
      colorChange2: '',
      colorChange3: '',
      colorChange4: '',
      colorChange5: '',
      rateDatas: {},
      mapIdArr: [],
      jamsTotalRate: '',
      eventVideos: [],
      timer: null
    }
  },
  created () {
    clearInterval(this.timer)
    this.trafficRealTImeData()

    this.timer = setInterval(() => {
      this.getTrafficRealTime()
    }, 3000)
    /*  this.timer = setInterval(() => {
        this.getTrafficRealTime()
      }, 3000) */
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    trafficRealTImeData () {
      this.getTrafficRealTime() // 获取查看交通实时态势
      this.getSelectBasics() // 获取查看基础数据
      this.getSelectSection() // 获取查看拥堵top10
      this.getSelectFlow() // 获取查看路段流量top10
      this.getSelectEvenit() // 获取查看事件清单
      this.getTrafficRealTimeData() // 添加交通实时状态
      this.getTrafficMapTypeData()
      this.getTrafficJamsRate()
      this.getCameraInfoList()
    },
    getTrafficMapTypeData () {
      trafficMapType().then(res => {
        this.mapIdArr = res.data
        // console.log(this.mapIdArr)
        for (var i = 0; i < this.mapIdArr.length; i++) {
          const item = this.mapIdArr[i]
          // console.log(item.level)
          // console.log(document.getElementById(item.id))
          if (item.level === '0') {
            document.getElementById(item.id).setAttribute('stroke', '#d7c83c')
          } else if (item.level === '1') {
            document.getElementById(item.id).setAttribute('stroke', '#d7c83c')
          } else if (item.level === '2') {
            document.getElementById(item.id).setAttribute('stroke', '#f80001')
          }
        }
      })
    },
    getTrafficRealTime () {
      trafficRealTIme().then(res => {
        if (res.data) {
          this.trafficRealTImeList = res.data
          this.jamsTotalRate = res.data.jamsTotalRate
        }
      })
    },
    getTrafficJamsRate () {
      trafficJamsRate().then(res => {
        if (res.data) {
          this.rateDatas = res.data
        }
      })
    },
    getSelectBasics () {
      selectBasics().then(res => {
        if (res.data) {
          this.selectBasics = res.data
        }
      })
    },
    getSelectSection () {
      selectSection().then(res => {
        if (res.data) {
          this.selectSections = res.data
        }
      })
    },
    getSelectFlow () {
      selectFlow().then(res => {
        if (res.data) {
          this.selectFlows = res.data
        }
      })
    },
    getSelectEvenit () {
      selectEvenit().then(res => {
        if (res.data) {
          this.selectEvenits = res.data
        }
      })
    },
    getTrafficRealTimeData () {
      addTrafficRealTime().then(res => {
        // console.log(res)
      })
    },
    getCameraInfoList () {
      cameraInfoList().then(res => {
        this.eventVideos = res.data
      })
    },
    realTime () {
      this.colorChange = '#60cda0'
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    fiveTime () {
      this.colorChange = ''
      this.colorChange1 = '#60cda0'
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    fifTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = '#60cda0'
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    threeTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = '#60cda0'
      this.colorChange4 = ''
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    firstTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = '#60cda0'
      this.colorChange5 = ''
      this.getTrafficMapTypeData()
    },
    secondTime () {
      this.colorChange = ''
      this.colorChange1 = ''
      this.colorChange2 = ''
      this.colorChange3 = ''
      this.colorChange4 = ''
      this.colorChange5 = '#60cda0'
      this.getTrafficMapTypeData()
    }
  }
}
</script>

<style scoped lang="less">

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    background: radial-gradient(rgba(2, 34, 195, 1), rgba(12, 20, 58, 1));
    overflow: hidden;

    .con_left {
      flex: 4;

        header {
          height: 15vh;
          display: flex;
          font-size: 24px;

          .logo {
            flex: 1.5;
          }

          .time {
            flex: 2.5;
          }

        }
        section {
          height: 85vh;
          display: flex;

          .left {
            flex: 1;

            .realtime {
              height: 42.5vh;
            }

            .traffic {
              height: 42vh;
              color: aqua;
              margin-top: 5px;
            }
          }

          .right {
            flex: 3;
            position: relative;

            .map {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .con_right {
        flex: 1;

        .basic_info {
          height: 20vh;
        }

        .traffic_top10 {
          height: 40vh;
        }

        .flow_top10 {
          height: 40vh;
        }
      }

      .decoration-7 {
        width: 100%;
        height: 30px;
        color: #fff;
        font-weight: 900;
        font-size: 18px;
        margin-top: 2px;
      }

      .border-box {
        position: absolute;
        z-index: 9;
        bottom: 0;
        width: 48%;
        height: 220px;
        margin-left: 0.5%;
      }

      .border-box1 {
        position: absolute;
        z-index: 9;
        bottom: 0;
        width: 48%;
        height: 220px;
        margin-left: 51%;
      }

      .border-boxRight1 {
        width: 100px;
        height: 5px;
        right: 30px;
        position: absolute;
        z-index: 999;
        top: 20px;
        display: flex;
        flex-direction: row;
      }

      .border-boxRight2 {
        width: 100px;
        height: 5px;
        right: 30px;
        position: absolute;
        z-index: 999;
        top: 50px;
        display: flex;
        flex-direction: row;
      }

      .border-boxRight3 {
        width: 100px;
        height: 5px;
        right: 30px;
        position: absolute;
        z-index: 999;
        top: 80px;
        display: flex;
        flex-direction: row;
      }

      .border-boxRight4 {
        width: 100px;
        height: 5px;
        right: 30px;
        position: absolute;
        z-index: 999;
        top: 110px;
        display: flex;
        flex-direction: row;
      }

      .border-boxRight5 {
        width: 100px;
        height: 5px;
        right: 30px;
        position: absolute;
        z-index: 999;
        top: 140px;
        display: flex;
        flex-direction: row;
      }

      .first {
        background-color: #00842c;
        width: 40%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid #00842c;
        display: inline-block;
      }

      .first1 {
        color: white;
        width: 60%;
        height: 100%;
        margin-left: 5px;
        margin-top: -5px;
      }

      .second {
        background-color: #98ff69;
        width: 40%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid #98ff69;
        display: inline-block;
      }

      .second1 {
        color: white;
        width: 60%;
        height: 100%;
        margin-left: 5px;
        margin-top: -5px;
      }

      .three {
        background-color: #feff5f;
        width: 40%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid #feff5f;
        display: inline-block;
      }

      .three1 {
        color: white;
        width: 60%;
        height: 100%;
        margin-left: 5px;
        margin-top: -5px;
      }

      .four {
        background-color: #ffed4f;
        width: 40%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid #ffed4f;
        display: inline-block;
      }

      .four1 {
        color: white;
        width: 60%;
        height: 100%;
        margin-left: 5px;
        margin-top: -5px;
      }

      .five {
        background-color: #f12039;
        width: 40%;
        height: 100%;
        border-radius: 5px;
        border: 1px solid #f12039;
        display: inline-block;
      }

      .five1 {
        color: white;
        width: 60%;
        height: 100%;
        margin-left: 5px;
        margin-top: -5px;
      }

      .title1 {
        margin-top: 30px;
        text-align: center;
        display: block;
        font-size: 40px;
        font-weight: 900;
        color: #fff;
        font-family: '\5FAE\8F6F\96C5\9ED1',serif;
        //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
        //background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(48, 248, 250, 1)), to(rgba(255, 255, 255, 1)));
        text-shadow: rgba(255, 255, 255, 0.4) 0 3px 4px, rgba(255, 255, 255, 0.2) 1px 3px 3px;
      }

      .title2 {
        margin-top: -10px;
        display: block;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
      }

      .de-decoration11 {
        margin-top: 45px;
        width: 160px;
        height: 80px;
        font-size: 30px;
        font-weight: 900;
        color: #60cda0;
        cursor: pointer;
      }

      .decoration11 {
        margin-top: 52px;
        width: 150px;
        height: 65px;
        font-size: 25px;
        font-weight: 600;
        color: #60cda0;
        cursor: pointer;
      }

      .decoration-3 {
        width: 100%;
        height: 10px;
      }

      .dv-decoration-1 {
        width: 50%;
        height: 30px;
        margin-top: 50px;
      }

      .decoration-1 {
        width: 50%;
        height: 30px;
        margin-top: 50px;
        margin-right: 10px;
      }

      .border-box-4 {
        margin-top: 10px;
        overflow: hidden;
      }

      .imgs01 {
        width: 50px;
        height: 30px;
        margin-left: 90px;
        margin-top: 2px;
      }

      .eventName {
        position: absolute;
        z-index: 9;
        bottom: 230px;
        width: 200px;
        height: 20px;
        color: white;
        font-style: initial;
        font-size: 18px;
        margin-left: -40px;
        font-weight: bolder
      }
    }
</style>
